<template>
  <div>
    <div class="bg-msg">
      <img src="/bg.jpeg" alt="" />
      <div class="setting" @click="settingMsg()">
        <van-icon name="setting" size="25px" color="#666" />
        <span>设置</span>
      </div>

      <div class="user-msg" v-if="islogin == true || islogin == 'true'">
        <van-uploader :after-read="afterRead" style="opacity: 0" />

        <img
          :src="
            userimg == 'null' || userimg == null
              ? '/user.jpeg'
              : 'http://localhost:8888/userimg/' + userimg
          "
          alt=""
          style="margin-left: -88px"
        />

        <span>{{ username }}</span>
      </div>
      <div class="user-msg" v-else>
        <img src="/user.jpeg" alt="" />
        <span @click="jumpLogin()">请登录</span>
      </div>
    </div>

    <div class="content">
      <template
        v-if="(this.islogin == true || this.islogin == 'true') && dynamic"
      >
        <div class="dynamicc" v-for="(item, i) in dynamic" :key="i">
          <div class="usermsg">
            <div>
              <span>{{ item.timer }}</span>
            </div>
          </div>
          <div>
            {{ item.content }}
          </div>

          <div class="imgs-con" v-if="item.conimg !=''">
            <van-image
              @click="showPopup"
              fit="cover"
              lazy-load
              v-for="(img, i) in item.conimg"
              :key="i"
              :src="`http://localhost:8888/imgcontent/${img}`"
              alt=""
              :width="`${
                imgW / item.conimg.length -
                (item.conimg.length - 1) / item.conimg.length
              }%`"
            />
          </div>
        </div>
      </template>

      <van-empty v-else description="暂无动态" />
    </div>

    <van-popup :close-on-popstate="true" class="big-img" v-model="show">
      <van-image
        @click="show = false"
        fit="cover"
        width="100%"
        :src="showImg"
      />
    </van-popup>
  </div>
</template>

<script>
import AppBar from "@/components/AppBar.vue";
import Vue from "vue";
import { Empty } from "vant";
import { Uploader } from "vant";
import { mapMutations, mapState } from "vuex";
import WoTai from "@/components/WoTai.vue";
import { Lazyload } from "vant";
Vue.use(Uploader);
Vue.use(Empty);
Vue.use(Lazyload);
export default {
  components: { AppBar, WoTai },
  computed: {
    ...mapState(["islogin", "idphone", "username", "uid", "userimg"]),
  },

  // 新注册用户无法获取 uid 和其他信息  但要保存起来
  mounted() {
    if (this.islogin == true || this.islogin == "true") {
      this.loadData();
      this.getDynamic();
    }
    this.loadData();
  },
  data() {
    return {
      // username: "请登录",
      active: "home",
      imgW: "100",
      dynamic: null,
      imgs: [],
      show: false,
      showImg: "",
    };
  },
  watch: {
    userimg(newValue, oldValue) {
      if (newValue != oldValue) {
        const url = "v1/users/updateimg";
        const params = `img=${this.userimg}&uid=${this.uid}`;
        this.axios.post(url, params).then((res) => {});
      }
    },
  },

  methods: {
    ...mapMutations(["signOut", "updataName", "getUid", "userImg", "signOut"]),
    showPopup(e) {
      this.show = true;
      this.showImg = e.target.currentSrc;
    },
    afterRead(file) {
      var formData = new FormData();
      //将用户选择的文件追加到form对象当中
      formData.append("attrName", file.file);
      this.axios.post("v1/users/image", formData).then((res) => {
        this.userImg(res.data.data.attrName.newFilename);
        const params = `userimg=${res.data.data.attrName.newFilename}&cid=${this.uid}`;
        this.axios.post("v1/users/updateconuserimg", params).then((res) => {});
      });
    },

    loadData() {
      if (this.islogin == true || this.islogin == "true") {
        const url = "v1/users/information";
        const params = `phone=${this.idphone}`;
        this.axios.post(url, params).then((res) => {
          this.updataName(res.data.name);
          this.getUid(res.data.uid);
          this.userImg(res.data.img);
        });
      } else {
        this.updataName("请登录");
      }
    },
    jumpLogin() {
      this.$router.push("/login");
    },
    settingMsg() {
      if (this.islogin == true || this.islogin == "true") {
        this.$router.push("/setting");
      } else {
        this.$router.push("/login");
      }
    },
    getDynamic() {
      let url = "v1/users/personal?cid=" + this.uid;
      this.axios.get(url).then((res) => {
        if (res.data.code == 200) {
          this.dynamic = res.data.data.reverse();
          this.dynamic.forEach((element) => {
            element.conimg = element.conimg.split(",");
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.bg-msg {
  position: relative;
  img {
    width: 100%;
    height: 200px;
  }
  .setting {
    height: 30px;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 18px;

    span {
      margin-left: 8px;
      vertical-align: top;
      color: #666;
    }
  }
  .user-msg {
    height: 120px;
    position: absolute;
    bottom: -60px;
    left: 20px;

    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      vertical-align: middle;
    }
    span {
      display: inline-block;
      line-height: 80px;
      vertical-align: top;
      margin-left: 10px;
      font-size: 23px;
      color: #666;
    }
  }
}
.content {
  margin-top: 50px;
}

.dynamicc {
  width: 85%;
  margin: 0 auto;
  border-bottom: 1px solid #eee;
  padding: 10px;
  // background-color: rgb(178, 197, 191);
  .usermsg {
    // width: 150px;
    line-height: 60px;
    display: flex;
    justify-content: space-between;

    span:nth-child(2) {
      margin-left: 10px;
    }
    span:last-child {
      display: inline-block;
      margin-right: 15px;
      color: #666;
    }
    img {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      vertical-align: middle;
    }
  }
  .imgs-con {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
}
.big-img {
  width: 100%;
 

}
</style>